<!-- 页面头部返回和搜索图标，标题 -->
<template>
	<view class="yes">
		<view class="yes-icon" v-if="yesBack">
			<slot name="back"></slot>
		</view>
		<view style="width: 70rpx;height: 70rpx;" v-if="!yesBack"></view>
		
		<view class="yes-time" v-if="yesTime">
			<slot name="time"></slot>
		</view>
		<view style="width: 70rpx;height: 70rpx;" v-if="!yesTime"></view>
		
		<view class="yes-icon" v-if="yesSearch">
			<slot name="search"></slot>
		</view>
		<view style="width: 70rpx;height: 70rpx;" v-if="!yesSearch"></view>
	</view>
	<view style="width: 100%; height: 180rpx;"></view>
</template>

<script setup>
	defineProps({
		yesBack: {
			type: Boolean,
			default: true
		},
		yesTime: {
			type: Boolean,
			default: true
		},
		yesSearch: {
			type: Boolean,
			default: true
		}
	})
</script>

<style scoped lang="scss">
	.yes {
		display: flex;
		position: fixed;
		align-items: end;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background: #000000;
		width: 100%;
		height: 180rpx;
		z-index: 10;
		/* #ifdef H5 */
		top: 84rpx;
		height: 100rpx;

		/* #endif */
		.yes-time {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.yes-icon {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 70rpx;
			height: 70rpx;
			background-color: #1d1d1d;
			border-radius: 15rpx;
		}
	}
</style>
<!-- 使用实例 -->
<!-- <my-Back-search>
		<template #back>
			<uni-icons type="bars" size="28" color="#ff0000"></uni-icons>
		</template>
		<template #time>
			<view>04-11</view>
		</template>
		<template #search>
			<uni-icons type="search" size="28" color="#ff0000"></uni-icons>
		</template>
	</my-Back-search> -->